<template>
  <treeselect ref="tree" :value="value" :options="options" :load-options="null" :default-expand-level="expandLevel"
    :auto-load-root-options="false" :show-count="showCount" :always-open="alwaysOpen" :placeholder="placeholder"
    @input="handleInput" />
</template>

<script>
  import {
    treeselect
  } from "@/api/system/dept";

  export default {
    name: "DepartmentSelect",
    props: {
      expandLevel: {
        type: Number,
        default: Infinity
      },
      value: {
        type: Number || String,
        default: null,
      },
      placeholder: {
        type: String,
        default: null,
      },
      alwaysOpen: {
        type: Boolean,
        default: false
      },
      showCount: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        options: [],
      };
    },
    created() {
      this.loadOptions()
    },
    methods: {
      loadOptions() {
        treeselect().then(({
          data
        }) => {
          this.options = data
        })
      },
      resetField() {
        this.$emit("input", null);
      },
      handleInput(data) {
        this.$emit("input", data);
        this.$emit("change", data);
      },
    },
  };

</script>
